<template>
  <div>
    <el-button @click="show = true">添加</el-button>
    <div class="tab">商品名称:{{ input }}</div>
    <!-- 渲染页面 -->
    <el-tag
      class="tab"
      :key="index"
      v-for="(item, index) in swe"
      closable
      @close="handleCheckChange(index)"
    >
      {{ item.title }}
    </el-tag>
    <!-- 弹出框 -->
    <el-dialog :title="'第' + stop + '步'" :visible.sync="show" width="50%">
      <!-- 第一步 -->
      <template v-if="stop == 1">
        <el-cascader
          v-model="oklist"
          :props="{
            value: 'title',
            label: 'title',
            children: 'child',
          }"
          :options="lists"
        ></el-cascader>
      </template>
      <!-- 第二步 -->
      <template v-if="stop == 2">
        <div class="q1">所选分类:{{ oklist.join(">") }}</div>
        <div class="q1">
          商品名称:<el-input
            v-model="input"
            class="inp"
            placeholder="请输入商品名称"
          ></el-input>
        </div>
      </template>
      <!-- 第三步 -->
      <template v-if="stop == 3">
        <el-tree
          ref="tre"
          :data="lists"
          :props="{
            value: 'title',
            label: 'title',
            children: 'child',
          }"
          show-checkbox
        >
        </el-tree>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="stop > 1" @click="stop--">上一步</el-button>
        <el-button v-if="oklist.length > 0 && stop < 3" @click="stop++"
          >下一步</el-button
        >
        <el-button v-if="stop == 3" @click="ok">确定</el-button>
        <el-button type="primary" @click="show = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      // 记录当前是第几步
      stop: 1,
      // 控制弹出框显示隐藏的变量
      show: false,
      // 选择的分类
      oklist: [],
      input: "",
      swe: [],
      // 所有的数据
      list: [
        {
          title: "北京",
          child: [
            {
              title: "顺义区",
            },
            {
              title: "海淀区",
            },
            {
              title: "朝阳区",
            },
            {
              title: "昌平区",
            },
            {
              title: "石景山区",
            },
            {
              title: "大兴区",
            },
          ],
        },
        {
          title: "郑州",
          child: [
            {
              title: "中原区",
            },
            {
              title: "二七区",
            },
            {
              title: "中牟县",
            },
            {
              title: "金水区",
            },
          ],
        },
        {
          title: "山西",
          child: [
            {
              title: "太原",
            },
            {
              title: "晋城",
            },
            {
              title: "运城",
            },
            {
              title: "长治",
            },
          ],
        },
        {
          title: "河北",
        },
        {
          title: "山东",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    // 确定
    ok() {
      this.swe = this.$refs.tre.getCheckedNodes();
      this.show = false;
    },
    // 删除
    handleCheckChange(index) {
      this.swe.splice(index, 1);
    },
  },
  computed: {
    // 通过计算属性筛选掉没有child的数据
    lists: function () {
      return this.list.filter((item) => item.child);
    },
  },
  watch: {},
};
</script>
<style scoped>
.q1 {
  margin-top: 30px;
}
.inp {
  width: 300px;
}
.tab {
  margin-top: 30px;
  margin-left: 20px;
}
</style>